<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script src="../09javascript/http.js"></script>
    <style>
         .bg{
            position: absolute;
            left:0;
            right: 0;
            top: 0;
            bottom: 0;
            background: -webkit-linear-gradient(top, rgb(240,125,125) 0%, rgb(225,237,195) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    
    }
    .item{
       width:150px;
       height: 180px;
       margin: 20px;
    }
    .item>img{
        width:150px;
        height: 150px;
        border: 1px solid red;
        box-sizing: border-box;
    }
    </style>
</head>

<body>
    <div class="bg" id="loading"><img src="images/tenor.gif" alt=""></div>
    <div class="box"></div>
    <script>
        var offset=0;

        http({
            callback: handleData,
            data: {
                offset
            }
        })

        function handleData(res) {
            var {playlists} = res;
            var musics = []
            // console.log(res)
            playlists.forEach((item, index) => {
                var obj = {};
                var {
                    name,
                    coverImgUrl
                } = item;
                obj.name = name;
                obj.imgUrl = coverImgUrl;
                musics.push(obj);
            })
            for (let i = 0; i < musics.length; i++) {
                var item = `<div class="item">
                    <img src="${musics[i].imgUrl}"/>
                    <p>${musics[i].name.slice(0,5)+'...'}</p>
                    </div>`
                    $(".box").append(item);
                }
                $(window).scroll(function(){
                    if(onReachBottom()){
                        offset+=35;
                        http({
                            callback:handleData,
                            data:{
                                offset
                            }
                        })
                    }
                })
            console.log(musics)

        }
    </script>
</body>

</html>